<template>
  <div class="container">
    <header class="header">
      <div class="go_back_btn" id="demo16">
            <span>返回</span>
      </div>
      <div class="cg_d">
        <span>采购单</span>
      </div>
    </header>

    <div class="main_container_b">
      <div class="in_page_e">
        <div class="in_page_e_header">
          2017年7月2日采购单
        </div>
        <div class="in_page_e_middle">
          <!--total s-->
          <!--total header-->
          <ul class="in_page_header_list">
            <li class="in_page_header_n">
              名称
            </li>
            <li class="in_page_header_c">
              入库类别
            </li>
            <li class="in_page_header_single">
              单价（元）
            </li>
            <li class="in_page_header_num">
              数量（斤）
            </li>
            <li class="in_page_header_qian">
              金额
            </li>
          </ul>
          <!--total header-->
          <!--<div class="scroll_wrap">-->
          <div class="wrap_total_main_list">
            <ul class="total_main_list">
              <li class="in_page_header_n total_main_list_n">
                包菜饭
              </li>
              <li class="in_page_header_c total_main_list_c">
                蔬菜
              </li>
              <li class="in_page_header_single total_main_list_s">
                0.65
              </li>
              <li class="in_page_header_num total_main_list_nc">
                281
              </li>
              <li class="in_page_header_qian">
                182
              </li>
            </ul>
            <ul class="total_main_list">
              <li class="in_page_header_n total_main_list_n">
                包菜
              </li>
              <li class="in_page_header_c total_main_list_c">
                蔬菜
              </li>
              <li class="in_page_header_single total_main_list_s">
                0.65
              </li>
              <li class="in_page_header_num total_main_list_nc">
                281
              </li>
              <li class="in_page_header_qian">
                182
              </li>
            </ul>
            <ul class="total_main_list">
              <li class="in_page_header_n total_main_list_n">
                包菜
              </li>
              <li class="in_page_header_c total_main_list_c">
                蔬菜
              </li>
              <li class="in_page_header_single total_main_list_s">
                0.65
              </li>
              <li class="in_page_header_num total_main_list_nc">
                281
              </li>
              <li class="in_page_header_qian">
                182
              </li>
            </ul>
            <ul class="total_main_list">
              <li class="in_page_header_n total_main_list_n">
                包菜
              </li>
              <li class="in_page_header_c total_main_list_c">
                蔬菜
              </li>
              <li class="in_page_header_single total_main_list_s">
                0.65
              </li>
              <li class="in_page_header_num total_main_list_nc">
                281
              </li>
              <li class="in_page_header_qian">
                182
              </li>
            </ul>
          </div>
          <!--</div>-->
          <!--total e-->
          <!--signle item s-->
          <div class="single_item">
            <div class="single_item_header">
              <div class="single_item_header_inner">
                <span class="single_item_header_name">蔬菜合计</span>
                <span class="single_item_header_num">992</span>
              </div>
            </div>
            <!--single item s-->
            <div class="wrap_total_main_list">
              <ul class="total_main_list">
                <li class="in_page_header_n total_main_list_n">
                  包菜
                </li>
                <li class="in_page_header_c total_main_list_c">
                  蔬菜
                </li>
                <li class="in_page_header_single total_main_list_s">
                  0.65
                </li>
                <li class="in_page_header_num total_main_list_nc">
                  281
                </li>
                <li class="in_page_header_qian">
                  182
                </li>
              </ul>
              <ul class="total_main_list">
                <li class="in_page_header_n total_main_list_n">
                  包菜
                </li>
                <li class="in_page_header_c total_main_list_c">
                  蔬菜
                </li>
                <li class="in_page_header_single total_main_list_s">
                  0.65
                </li>
                <li class="in_page_header_num total_main_list_nc">
                  281
                </li>
                <li class="in_page_header_qian">
                  182
                </li>
              </ul>
              <ul class="total_main_list">
                <li class="in_page_header_n total_main_list_n">
                  包菜
                </li>
                <li class="in_page_header_c total_main_list_c">
                  蔬菜
                </li>
                <li class="in_page_header_single total_main_list_s">
                  0.65
                </li>
                <li class="in_page_header_num total_main_list_nc">
                  281
                </li>
                <li class="in_page_header_qian">
                  182
                </li>
              </ul>
              <ul class="total_main_list">
                <li class="in_page_header_n total_main_list_n">
                  包菜
                </li>
                <li class="in_page_header_c total_main_list_c">
                  蔬菜
                </li>
                <li class="in_page_header_single total_main_list_s">
                  0.65
                </li>
                <li class="in_page_header_num total_main_list_nc">
                  281
                </li>
                <li class="in_page_header_qian">
                  182
                </li>
              </ul>
            </div>
            <!--single item e-->
          </div>
          <!--single item e-->
        </div>
      </div>
      <div class="certain_btn">
        确认入库
      </div>
    </div>
    <div class="top_logo">
      <img src="/static/sprites/dd/yiyunhualogo.png" alt="">
    </div>
    <div class="bottom_log">
      <img src="/static/sprites/dd/yiyunahu_n_logo.png" alt="">
    </div>
  </div>

</template>
<script>
  import {mapState, mapMutations} from 'vuex'
  import store from '../vuex/store_index';
  export default {
    name: 'bottom_btn',
    data () {
      return {
        object: this.$store.getters.Get_Bot_C_obj,
        sign_c: true
      }
    },
    computed: mapState([
      'BottomBtn'
    ]),
    methods: {
      ...mapMutations([
        'M_BottomClick',
        'M_BottomClick_2'
      ]),
      cc (sign) {
//        console.log(sign)
        this.$store.commit('M_BottomClick',sign)
        // alert(111)
//        this.M_BottomClick_2()
        //store.commit('M_BottomClick')
      }
    },
    mounted(){
      this.$store.getters.Get_Bot_C_obj
    }
  }
</script>
<style scoped>
  .top_logo{
    position: absolute;
    top:3.5rem;
    right: 4vw;
  }
  .bottom_log{
    position: absolute;
    bottom: 2rem;
    right: 3vw;
  }
  .main_container_b{
    overflow: hidden;
    background-color: #ffffff;
    margin: 1vw 1vw 0vw 1vw;
  }
  .container{
    position: relative;
    background-color: #f4f7f8;
  }
  /*certain btn s*/
 .certain_btn{
   width: 16vw;
   height: 3rem;
   line-height: 3rem;
   text-align: center;
   /*background-color: #fa3e3e;*/
   box-shadow : 0 4px 10px 2px rgba(250, 61, 61, 0.22);
   color: #ffffff;
   margin-left: 11vw;
   font-size: 0.9rem;
   border-radius: 4vw;
   margin-bottom: 1.5rem;
   background: -webkit-linear-gradient(left, #fa3d3d , #fb5a54); /* Safari 5.1 - 6.0 */
   background: -o-linear-gradient(right, #fa3d3d, #fb5a54); /* Opera 11.1 - 12.0 */
   background: -moz-linear-gradient(right, #fa3d3d, #fb5a54); /* Firefox 3.6 - 15 */
   background: linear-gradient(to right, #fa3d3d , #fb5a54); /* 标准的语法 */
 }
 /*certain btn e*/
  .single_item_header_name{
    margin-right: 10.8vw;
  }
  .single_item_header_num{
    margin-right: 4.4vw;
  }
  .in_page_header_qian{
    margin-right: 3.2vw;
  }
  /*single item header s*/
  .single_item_header{
    font-weight: 600;
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid #dfdfe4;
    margin-bottom: 1.4rem;
  }
  .single_item_header_inner{
    float: right;
  }

  /*single item header e*/
  /*scroll_wrap s*/
  .scroll_wrap{
    height: 19.4rem;
    overflow-y: scroll;
  }
  /*scroll_wrap e*/
  /*main height s*/
  .in_page_e{
    height: 25.1rem;
  }

  /*main height e*/
/*header s*/
.in_page_header_list{
   border-bottom:1px solid #333333;
   margin-bottom: 1.2rem;
   font-weight: 600;
   color: #333333;
}
.in_page_header_list li{
  font-size: 1rem;
}
.in_page_header_n{
  margin-left: 1.6vw;
  margin-right: 11vw;
}
.in_page_header_c{
  margin-right: 14vw;
}
.in_page_header_single{
  margin-right: 10vw;
}
.in_page_header_num{
  margin-right: 11vw;
}
.go_back_btn span{
  position: absolute;
  -webkit-transform: translate(-0.1vw);
  -moz-transform: translate(-0.1vw);
  -ms-transform: translate(-0.1vw);
  -o-transform: translate(-0.1vw);
  transform: translate(-0.1vw);
}
.header{
  display: flex;
  position: relative;
  height: 3.2rem;
  line-height: 3.2rem;
  text-align: center;
  font-size: 1rem;
  color: #333333;
  box-shadow: 0 0 10px 6px rgba(51, 51, 51, 0.1);
}
.go_back_btn{
  position: relative;
  top:0;
  left:0;
  color: #ffffff;
  text-align: center;
  height: 100%;
  width:  11vw;
  box-shadow: -5px 2px 10px 2px #fb5852;
  background-color: #fb5852;
}
/*total header main s*/
.total_main_list_nc{
  margin-right: 10vw;
}
.total_main_list li{
  width: 13vw;
  font-size: 0.9rem;
  word-wrap:break-word
}
.total_main_list{
  display:flex;
  justify-content: space-around;
  letter-spacing: 1px;
  margin-bottom: 1.2rem;
}
.total_main_list_n{
  margin-right:10vw;
  margin-left: 0vw;
}
.total_main_list_c{
  margin-right: 13vw;
}
.total_main_list_s{
  margin-right: 12vw;
}
.wrap_total_main_list{
  border-bottom: 1px solid #dfdfe4;
}
/*toatal header main e*/
/*三角形s*/
#demo16{
  position: relative;
}
#demo16:after, #demo16:before {
  border: 0.6rem solid transparent;
  border-right: 0.6rem solid #fb5852;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  transform:translateY(-50%) translateX(2.4vw);
  left:0.3vw;
  content: ' ';
}

#demo16:before {
  border-right-color: #ffffff;
  left: 0px;
}
/*三角形e*/
.cg_d{
  text-align: center;
  width: 88.4vw;
}
.cg_d span{
  position: absolute;
  left:50%;
   transform: translateX(-50%);
}
/*header e*/
/* list header s*/
.in_page_header_list{
  display: flex;
  height: 3rem;
  line-height: 3rem;
  border-bottom: 1px solid #dfdfe4;
}

/*list header e*/
.in_page_e_header{
  font-size: 1rem;
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: #333333;
  letter-spacing: 2px;
}
.in_page_e_middle{
  padding-left: 2vw;
  padding-right: 2vw;
  margin-left: 8vw;
  margin-right: 8vw;
  height: 17rem;
  overflow-y: scroll;
}
</style>
